
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{margin:0;padding:0}
        body {
            background: url(images/1.jpg) top center;
        }
        .box {
            height: 150px;
            background: rgba(255,255,255,.3);
            text-align: center;
            padding-top:50px;
        }
        .box img {
            cursor: pointer;
        }
    </style>
    <script>
        window.onload = function(){
            /*要做事，先找人*/
            var pic1 = document.getElementById("pic1");
            var pic2 = document.getElementById("pic2");
            var pic3 = document.getElementById("pic3");
            pic1.onclick = function(){
                document.body.style.backgroundImage = "url(images/1.jpg)";
            }
            pic2.onclick = function(){
                document.body.style.backgroundImage = "url(images/2.jpg)";
            }
            pic3.onclick = function(){
                document.body.style.backgroundImage = "url(images/3.jpg)";
            }
        }
    </script>
</head>
<body>
<div class="box">
    <img src="images/1.jpg" alt="" width="150" id="pic1"/>
    <img src="images/2.jpg" alt="" width="150" id="pic2"/>
    <img src="images/3.jpg" alt="" width="150" id="pic3"/>
</div>
</body>
</html>